<template>
  <div>
    <h1>用户理财数据表</h1>
    <table class="table table-bordered">
      <tr>
        <td>理财名称</td>
        <td>
          {{ state.F_name }}
        </td>
      </tr>
      <tr>
        <td>利息</td>
        <td>
          <select v-model="state.FT_id" class="form-control">
            <option value="0">--请选择--</option>
            <option v-for="item in list" :value="item.FT_id">{{ item.FT_name}}</option>
          </select>
        </td>
      </tr>
      
      <tr>
        <td>最低金额</td>
        <td>
          {{ state.minPrice }}
        </td>
      </tr>
      <tr>
        <td>理财金额</td>
        <td>
          <input type="text" v-model="Price" class="form-control"> CNY
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="button" @click="finance" value="理财" class="btn btn-primary">
        </td>
      </tr>
    </table>
  </div>
</template>
<script setup lang="ts">
import { reactive,onMounted,toRefs,ref } from 'vue';
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
import {useStore} from '../../store/user'
const store = useStore();


// const F_id=router.currentRoute.value.query.F_id;

const data=reactive({
  state:{
    F_id:route.query.F_id,
    F_name:'',
    FT_id:'0',
    minPrice:0,
  },
  Price:0
})

const {state,Price}=toRefs(data)

const list=ref([{
  FT_id:'',
  FT_name:'',
}])

onMounted(()=>{
  BackFill()
  Bind()
})


const finance=()=>{
  axios({
    url:'http://localhost:59121/api/Finance/PostUserFinance',
    method:'post',
    data:{
      Price:Price.value,
      F_id:route.query.F_id,
      L_id:store.UserInfo.L_id
    }
  })
  .then(res=>{
    console.log(res.data);
    if(state.value.minPrice<Price.value){
      alert("理财金额不能低于最低金额")
      return
    }
    if(res.data>0){
      alert("理财成功")
      router.push('/UserFinance')
    }
    else{
      alert("理财失败")
    }
  })
  .catch(err=>{
    console.log(err)
  })
}

const Bind=()=>{
  axios({
    url:'http://localhost:59121/api/Finance/GetInesterBind',
    method:'get',
  })
  .then(res=>{ 
    console.log(res.data);
    list.value=res.data
  })
  .catch(err=>{
    console.log(err)
  })
}


const BackFill=()=>{
  axios({
    url:'http://localhost:59121/api/Finance/GetUserFinanceBack',
    method:'get',
    params:{
      F_id:state.value.F_id
    }
  })
  .then(res=>{
    console.log(res.data);
    state.value=res.data
  })
  .catch(err=>{
    console.log(err)
  })
}


</script>